﻿<div class="kt-login__form" [@routerTransition]>

    <div class="kt-portlet kt-portlet--bordered">
        <div class="kt-portlet__body">
            <div class="kt-portlet kt-portlet--bordered">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            {{"TenantSignUp" | localize}}
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">

                    <div class="form-group row">
                        <label class="col-sm-4">{{l("Item")}}</label>
                        <div class="col-sm-8 text-right">
                            <p class="kt-font-bold">
                                {{description}}
                            </p>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-4">{{l("Price")}}</label>
                        <div class="col-sm-8 text-right">
                            <p class="kt-font-bold" id="totalPrice">
                                {{appSession.application.currencySign}}{{totalAmount | number : '1.2-2'}}
                            </p>
                        </div>
                    </div>

                    <div *ngIf="config && config.demoUsername && config.demoPassword"
                         class="alert alert-secondary fade show"
                         role="alert">
                        <div class="alert-icon"><i class="flaticon-questions-circular-button"></i></div>
                        <div class="alert-text">
                            <h4>
                                {{l("DemoPayPalAccount")}}
                            </h4>
                            <p>
                                <span>{{l("UserName")}}: <strong>{{config.demoUsername}}</strong></span><br />
                                <span>{{l("Password")}}: <strong>{{config.demoPassword}}</strong></span>
                            </p>
                        </div>
                        <div class="alert-close">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true"><i class="la la-close"></i></span>
                            </button>
                        </div>
                    </div>

                    <div id="paypal-button"></div>
                    <div [busyIf]="paypalIsLoading" *ngIf="paypalIsLoading"></div>
                </div>
            </div>	
        </div>
    </div>

</div>
